<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<title>지도보기</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; font-size:8pt; }
#map { width: 100%; height: 100%;}

</style>
<script type="text/javascript">
  WebFontConfig = {
    custom: {
        families: ['Nanum Gothic'],
        urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
    }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=fc85a644ffe658b376fd7cd37bf89ca564b975b5"></script>
<script type="text/javascript">
	window.onload = function() {
		//맵 로드
		var latitude = '${lat}';
		var longitude = '${lng}';
		var place = '${place}';
		
		var map = new daum.maps.Map(document.getElementById('map'), {
			center: new daum.maps.LatLng(latitude, longitude),
			level: 3
		});
		
		var zoomControl = new daum.maps.ZoomControl(); 
		map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
		var mapTypeControl = new daum.maps.MapTypeControl(); 
		map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
		
		var marker = new daum.maps.Marker({
			position: map.getCenter()
		});
		marker.setMap(map);
		
		var infowindow = new daum.maps.InfoWindow({
			content: '<p style="margin:7px 22px 7px 12px;font:14px/1.5 Nanum Gothic"><strong>'+place+'</strong></p>',
			removable : true
		});
		infowindow.open(map, marker);
	}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>